<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css自定义滚动条</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0px;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body {
				padding: 0;
				margin: 0px;
				background: #ffffff;
				width: 100%;
				height: 100%;
				overflow: hidden;
				
			}
			.customScrollBar{
				height: 100%;
				  overflow-y: scroll;
			}
			
			// 滚动条整体部分
			.customScrollBar::-webkit-scrollbar {
			  height: 18px;
			  width: 18px;
			}
			// 滚动条两端的按钮
			.customScrollBar::-webkit-scrollbar-button {
			  background-color: #fff;
			  background-repeat: no-repeat;
			  cursor: pointer;
			  /* display: none; */
			}
			// 滚动条两端的按钮 背景图
			.customScrollBar::-webkit-scrollbar-button:vertical:increment,.customScrollBar::-webkit-scrollbar-button:vertical:increment {
			  background-image: url()
			}
			.customScrollBar::-webkit-scrollbar-button:vertical:decrement,.customScrollBar::-webkit-scrollbar-button:vertical:decrement {
			  background-image: url()
			}	
			// 边角，两个滚动条交汇处
			.customScrollBar::-webkit-scrollbar-corner {
			background-color: #fff;
			}
			// 滑块背景色
			.customScrollBar::-webkit-scrollbar-thumb {
			border-radius: 9px;
			border: solid 6px #fff;
			background-color: #c8c8c8;
			}
			// 滑块背景色hover
			.customScrollBar::-webkit-scrollbar-thumb:hover {
			  border-radius: 9px;
			  /* border: solid 6px #f3f3f3; */
			  background-color: #98a3a6
			}
			// 滚动条背景
			.customScrollBar::-webkit-scrollbar-track {
			  background-color: #fff;
			}
			
		</style>
	</head>
	<body>
		<div class="customScrollBar">
			<div style="height: 3000px;background: #fff;"></div>
		</div>
		
	</body>
</html>
